<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body {
        font-size: 30px;
    }

    h2 {
        font-family: "microsoft Yahei";
        font-size: 50px;
    }

    p {
        font-family: "宋体" ；
    }

    /* 让倾斜的字体不倾斜 */
    em {
        font-style: normal;
    }

    .small {
        font-size: 20px;
    }

    .bold {
        font-weight: bold;
    }

    #bolder {
        /* 这里的数字后面不需要加单位px，实际开发中更多用数字 */
        /* normal=400 bold=700  */
        font-weight: 1000;
    }

    .italic {
        font-style: italic;
    }

    /* 复合属性：简写方式，节约代码（按顺序空格隔开，size和family必须有，其余可省略 */
    div {
        font: 1000 80px "microsoft yahei";
    }
</style>

<body>
    <h2 id="bolder">静夜思</h2>
    <p class="italic small">唐 李白</p>
    <p>床前明月光，</p>
    <p>疑是地上霜。</p>
    <p class="bold">举头望明月，</p>
    <p class="bold">低头思故乡。</p>
    <!-- em标签内本身就是斜体 -->
    <em class="normal small">2024年6月19日</em>
    <div>唐诗三百首</div>
</body>

</html>